<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'/> 
<title>跳转提示</title>

<!--[if IE 8]>
<style>
.ie8 .alert-circle,.ie8 .alert-footer { display:none;}
.ie8 .alert-box { padding-top:75px;}
.ie8 .alert-sec-text {top:45px;}
</style>
<![endif]-->
<!--[if IE 8]>
<style>
.ie8 .alert-circle,.ie8 .alert-footer { display:none;}
.ie8 .alert-box { padding-top:75px;}
.ie8 .alert-sec-text {top:45px;}
</style>
<![endif]-->
<style>

body { margin:0; padding:0; background:#E6EAEB; font-family:Arial,微软雅黑,宋体,sans-serif;}

.alert-box { display:none; position:relative; margin:12% auto 0; padding:160px 0px 10px; border-radius:10px 10px 0 0; background:#FFF; box-shadow:0px 5px 10px rgba(102,102,102,0.5); width:90%; max-width:380px; color:#FFF; text-align:center;}
@media screen and (max-width:639px){
.alert-box { margin:30% auto 0;}
}
.alert-box p { margin:0;}
.alert-circle { position:absolute; top:-50px; left:0; right:0; margin:auto;}
.alert-sec-circle { stroke-dashoffset:0; stroke-dasharray:735; transition:stroke-dashoffset 1s linear;}
.alert-sec-text { position:absolute; top:11px; left:0; right:0; margin:auto; width:76px; color:#000; font-size:68px;}
.alert-sec-unit { font-size:34px;}
.alert-body { margin:35px 0;}
.alert-head { color:#242424; font-size:28px;}
.alert-concent { margin:25px 0 14px; color:#7B7B7B; font-size:18px;}
.alert-concent p { line-height:27px;}
.alert-btn { display:block; border-radius:10px; background-color:#4AB0F7; height:55px; line-height:55px; width:90%; color:#FFF; font-size:20px; text-decoration:none; letter-spacing:2px; margin:0 auto;}
.alert-btn:hover { background-color:#6BC2FF;}
.red { color:#e00;}

</style>

</head>
<body class="ie8">

<div id="js-alert-box" class="alert-box">
	<svg class="alert-circle" width="234" height="234">
		<circle cx="117" cy="117" r="108" fill="#FFF" stroke="#43AEFA" stroke-width="17"></circle>
		<circle id="js-sec-circle" class="alert-sec-circle" cx="117" cy="117" r="108" fill="transparent" stroke="#F4F1F1" stroke-width="18" transform="rotate(-90 117 117)">3</circle>
		<text class="alert-sec-unit" x="100" y="172" fill="#BDBDBD">秒</text>
	</svg>
	<div id="js-sec-text" class="alert-sec-text">3</div>
	<div class="alert-body">
		<div id="js-alert-head" class="alert-head">温馨提示</div>
		<div class="alert-concent">
						<p class="red">栏目不存在</p>		</div>
		<a class="alert-btn" id="href" href="javascript:history.back(-1);">页面跳转</a>
	</div>
</div>
<script type="text/javascript">
function alertSet(e) {
    document.getElementById("js-alert-box").style.display = "block",
    document.getElementById("js-alert-head").innerHTML = e;
    var t = 3,
    n = document.getElementById("js-sec-circle");
    document.getElementById("js-sec-text").innerHTML = t,
    setTimeout(function() {
	var e = 0
 	n.style.strokeDashoffset = -245;
    });
    setInterval(function() {
    	//每过一秒判断一次t的值如果不=0，-1
        if (t==0 ){
		}else {
            t -= 1,
            document.getElementById("js-sec-text").innerHTML = t;
        }
    },
    1000);
    setInterval(function() {
    	switch(t){
    		case 2:
    		n.style.strokeDashoffset = -490;
    		break;
    		case 1:
    		n.style.strokeDashoffset = -735;
    		break;
    		case 0:
    		location.href="javascript:history.back(-1);";
    		break;
    	}
    },
    1000);
}
</script>

<script>alertSet('温馨提示');</script>
 


</body>
</html>